<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网络学生</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<!--引入layui的js  -->
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!--引入jquery的js  -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>
	<script src="../js/click.js"></script>
	

	<body>
		<!-- 查询条件输入框 -->
		<div class="layui-form-item" style="margin-top: 10px;">
			<form class="layui-form" onsubmit="return false;">
				<label class="layui-form-mid">学生名:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<input type="text" id="name" name="name" autocomplete="off" class="layui-input">
				</div>
				
				<label class="layui-form-mid">录入状态:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<select id="stustatus" name="stustatus">
						<option value="">所有</option>
						<option value="1">已录入</option>
						<option value="2">已缴费</option>
						<option value="3">失败</option>
					</select>
				</div>
				
				<label class="layui-form-mid">是否付款:</label>
				<div class="layui-input-inline" style="width: 120px;">
					<select id="ispay" name="ispay">
						<option value="">所有</option>
						<option value="0">未付款</option>
						<option value="1">已付款</option>
					</select>
				</div>
				
				<label class="layui-form-mid">起止时间:</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="createTime" name="createTime" placeholder="yyyy-MM-dd HH-mm-ss"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 170px;">
					<input type="text" id="endDate" name="endDate" placeholder="yyyy-MM-dd HH-mm-ss" autocomplete="off"
						class="layui-input">
				</div>

				<div class="layui-input-inline" style="width: 300px;">
					<button class="layui-btn" lay-submit lay-filter="search" id="search" data-type="reload"><i
							class="layui-icon">&#xe615;</i>搜索</button>
					<button class="layui-btn layui-btn-normal" lay-submit lay-filter="add" id="add"
						data-type="reload">添加</button>
					<a class="layui-btn layui-btn-small" style="line-height:1.6em;"
						href="javascript:location.replace(location.href);" title="刷新">
						<i class="layui-icon" style="line-height:38px">&#xe666;</i>
					</a>
				</div>
			</form>
		</div>

		<!-- 修改的弹层页面  -->
		<div id="editLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="editForm" id="editForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">消息内容:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<!--<input type="text" id="content" name="content" class="layui-input" lay-verify="required">-->
						<textarea name="content" id="content" lay-verify="content" placeholder="请输入" class="layui-textarea"></textarea>
						<input type="hidden" name="senderid" id="senderid"/>
						<input type="hidden" name="sendername" id="sendername"/>
						<input type="hidden" name="receiverid" id="receiverid"/>
						<input type="hidden" name="receivername"id="receivername" />
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="editSubmit" lay-submit="">发送</button>
				</div>
			</form>
		</div>

		<!-- 新增的弹层页面  -->
		<div id="addLayer" style="display: none; margin-top: 20px;">
			<form class="layui-form" lay-filter="addForm" id="addForm" action="">
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>学生姓名:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="name" name="name" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>年龄:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="age" name="age" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>性别:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<select id="sex" name="sex">
							<option value="">-- 请选择 --</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>手机号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="phone" name="phone" class="layui-input"
							lay-verify="required|phone">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>QQ号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="qq" name="qq" class="layui-input"
							lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>微信号:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" id="weixin" name="weixin" class="layui-input"
							lay-verify="required">
						<input type="hidden" id="netpusherid" name="netpusherid" class="layui-input">
						<input type="hidden" id="createuser" name="createuser" class="layui-input">
					</div>
				</div>
				<div class="layui-btn-container" style="text-align: center;">
					<button class="layui-btn" lay-filter="addSubmit" lay-submit="">添加</button>
				</div>
			</form>
		</div>

		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs layui-btn-small" lay-event="edit">发信息</a>
		</script>

		<script>
			layui.use(['laydate', 'layer', 'form', 'table', 'tree', 'upload', 'transfer','layedit'], function() {
				var laydate = layui.laydate //日期组件
					,
					layer = layui.layer //弹层组件
					,
					form = layui.form //表单组件
					,
					upload = layui.upload //上传组件
					,
					tree = layui.tree //树形结构组件
					,
					$ = layui.$ //jQuery
					,
					table = layui.table,
					layedit = layui.layedit,//文本域
					transfer = layui.transfer; //表格组件
					

				//日期控件
				laydate.render({
					elem: '#createTime',
					type: 'datetime'
				});
				laydate.render({
					elem: '#endDate',
					type: 'datetime'
				});

				//渲染表格，填充数据
				table.render({
					elem: '#proTable', //对应上面定义的表格ID
					url: "" + globalData.server + "students/getNetPusherIdAll", //提交到后台的地址
					method: 'post', //提交方式 get或者post
					where: {
						"netpusherid": globalData.getCurUid(),
						"token": globalData.token
					},
					even: true, //表格隔行变色
					page: true, //开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '产品表', //表格名称
					cols: [
						[{
							field: 'id', //对应实体类里的属性    （必需有）
							fixed: 'left', //固定方式，left左固定，right右固定 （可选）
							align: 'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							title: '学生id', //表头名称			（必需有）
							sort: true,
							width: 100 //开启排序（可选）
						}, {
							field: 'name',
							title: '学生名',
							width: 100
						}, {
							field: 'age',
							title: '年龄'
						}, {
							field: 'sex', //对应实体类里的属性
							title: '性别' //表头名称
						}, {
							field: 'phone',
							title: '手机号',
							width: 150
						}, {
							field: 'qq',
							title: 'QQ号',
							width: 150
						}, {
							field: 'weixin',
							title: '微信号',
							width: 150
						}, {
							field: 'stustate',
							title: '录入状态',
							width: 100,
							templet: function (d) {
				                if (d.stustate =='1'){
				                    return '<div style="color:#5FB878;">已录入</div>'
				                }else if(d.stustate =='2') {
				                    return '<div style="color:#FFB800;">已缴费</div>'
				                }else {
				                    return '<div style="color:#FF0000;">失败</div>'
				                }
				            }
						}, {
							field: 'netpusherid',
							title: '录入人id',
							width: 200
						}, {
							field: 'createuser',
							title: '录入人姓名',
							width: 200
						}, {
							field: 'askerid',
							title: '咨询师id',
							width: 100
						}, {
							field: 'isvalid',
							title: '是否有效',
							width: 100,
							templet: function(d){
				                if (d.isvalid =='0'){
				                    return '<div style="color:#FF0000;">无效</div>'
				                }else {
				                    return '<div style="color:#5FB878;">有效</div>'
				                }
				            }
						}, {
							field: 'zixunname',
							title: '咨询师姓名',
							width: 100
						}, {
							field: 'createtime',
							title: '创建时间',
							width: 150
						}, {
							field: 'isretuenvist',
							title: '是否跟踪',
							width: 100,
							templet: function(d){
							    if (d.isretuenvist =='1'){
							        return '<div style="color:#5FB878;">正在跟踪</div>'
							    }else {
							        return '<div style="color:#FF0000;">未开始跟踪</div>'
							    }
							}
						}, {
							field: 'firstvisittime',
							title: '第一次跟踪时间',
							width: 150
						}, {
							field: 'ishome',
							title: '是否在家',
							width: 100
						}, {
							field: 'ispay',
							title: '是否付款',
							width: 100,
							templet: function (d) {
				                if (d.ispay =='0'){
				                    return '未付款'
				                }else {
				                    return '已付款'
				                }
				            }
						}, {
							field: 'paytime',
							title: '付款时间',
							width: 150
						}, {
							field: 'money',
							title: '付款金额',
							width: 100
						}, {
							fixed: 'right',
							title: '操作',
							width: 100,
							toolbar: '#barDemo'
						}]
					]
				});


				form.verify({
					//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
					zf: [/^.{2,}$/, '登录名不少于2个字符'],
					pwd: [/^.{5,}$/, '密码不少于 5 个字符'],
					phone: [/^[1][3,5,7,8]\d{9}$/]
				});

				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
				form.on('submit(search)', function(data) {
					var field = data.field; //获取所有的输入条件值
					//执行重载
					table.reload('proTable', {
						page: {
							curr: 1
						}, // 重载后回到第一页
						where: field // 把所有的输入值传给后台
					});
				});

				form.on('submit(add)', function(data) {
					//清空新增页面的表单内容，防止上次输入的数据还在
					$("#addForm")[0].reset();
					//打开新增的弹层
					layer.open({
						type: 1,
						title: '您正在新增学生信息',
						content: $('#addLayer'),
						area: ['500px', '400px']
					});
				});


				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					$('#netpusherid').val(globalData.getCurUid());
					$('#createuser').val(globalData.getCurUName());
					var str = $("#addForm").serialize() + "&token=" + globalData.token;
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "students/createStudents", //提交路径
						data: str, //参数
						dataType: 'json',
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("添加成功！！！"); //提示信息
							table.reload('proTable'); // 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});


				//数据表格里的事件监听
				table.on('tool(filterTable)', function(obj) {
					var data = obj.data; //获取当前行的数据

					switch (obj.event) {
						case 'edit': //修改操作
							//数据的回显
							//form.val("editForm", data);
							$("#senderid").val(data.netpusherid);
							$("#sendername").val(data.createuser);
							$("#receiverid").val(data.askerid);
							$("#receivername").val(data.zixunname);
							//打开弹层
							var openIndex;
							    
						    //（新增窗口）
								openIndex = layer.open({
									type: 1,
									content: $("#editLayer"),
									area: ['600px', '400px'],
									title: '发送信息',
									//btn: ['保存', '关闭'],
									success: function () {
										$('#editForm')[0].reset();
										// 将富文本编辑器在打开弹出层之后再启用
										layeditObj = layedit.build('content',{
											tool: [
											  'strong' //加粗
											  ,'italic' //斜体
											  ,'underline' //下划线
											  ,'del' //删除线
											  ,'|' //分割线
											  ,'left' //左对齐
											  ,'center' //居中对齐
											  ,'right' //右对齐
											  ,'link' //超链接
											  ,'unlink' //清除链接
											  ,'face' //表情
											  ,'help' //帮助
											]
										});
										form.verify({
											article_desc: function (value) {
												layedit.sync(layeditObj);
											}
										});
										layedit.setContent(layeditObj, '', false);
									},
									btn1: function (index, layero) {
										// 略......
									},
									btn2: function (index, layero) {
										layer.close(index);
									},
									cancel: function (index, layero) {
										layer.close(index);
									}
								});
								
							break;
					};
				})
				    	  
				//修改弹层的提交按钮
				form.on('submit(editSubmit)', function(data) {
					$('#content').val(layedit.getContent(layeditObj));
					$.ajax({
						type: 'post', //提交方式get或post
						url: "" + globalData.server + "message/createMessage", //提交路径
						data: $("#editForm").serialize() + "&token=" + globalData.token, //参数
						dataType: 'json', //返回的数据类型
						success: function(res) { //提交成功
							layer.closeAll(); //关闭弹层
							layer.alert("发送成功！！！"); //提示信息
							table.reload('proTable'); //刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});
					return false;
				});
				
			});
		</script>
	</body>
</html>
